<template>
  <content-wrapper>
    <div class="box box-solid">
      <div class="box-body table-responsive no-padding">
        <div class="mailbox-controls">
          <div class="btn-group">
            <bs-button v-auth="'system:role:create'" icon="fa fa-plus" size="sm" :to="{name:'SystemRoleForm'}"/>
            <bs-button icon="fa fa-refresh" size="sm" :loading="loading" @click="loadRoleList"/>
          </div>
        </div>
        <table class="table table-hover">
          <thead class="with-border">
          <tr>
            <th width="220">名称</th>
            <th width="150">标识</th>
            <th>描述</th>
            <th width="100">状态</th>
            <th width="100">&nbsp;</th>
          </tr>
          </thead>
          <tbody>
          <tr v-if="dataList.length == 0">
            <td colspan="20">暂无数据</td>
          </tr>
          <tr v-for="item in dataList" :key="item.roleKey">
            <td nowrap>{{item.roleName}}</td>
            <td nowrap>{{item.roleKey}}</td>
            <td>{{item.description}}</td>
            <td nowrap>
              <p-check v-auth="'system:role:updateEnable'" class="p-svg p-curve" color="success" toggle v-model="item.enable" @change="onStatus(item)">
                <svg slot="extra" class="svg svg-icon" viewBox="0 0 20 20">
                  <path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z"
                        style="stroke: white;fill:white"></path>
                </svg>
                可用
                <label slot="off-label">不可用</label>
              </p-check>
              <span v-auth-else="'system:role:updateEnable'">{{item.enable?'可用':'不可用'}}</span>
            </td>
            <td class="actions">
              <router-link v-auth="'system:role:grant'" v-if="item.enable" :to="{name:'SystemRoleGrant',query:{id:item.id,name:item.roleName}}" class="fa fa-gear"> 授权</router-link>
              <router-link v-auth="'system:role:edit'" :to="{name:'SystemRoleForm',query:{id:item.id}}" class="fa fa-edit"></router-link>
              <a v-auth="'system:role:delete'" class="fa fa-trash" @click="onTrash(item)"></a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <router-view></router-view>
  </content-wrapper>
</template>

<script>
  export default {
    name: 'SystemRole',
    data() {
      return {
        dataList: [],
        loading: false
      };
    },
    mounted() {
      this.loadRoleList();
    },
    methods: {
      loadRoleList() {
        this.$api('system.role.list').invoke().then(({data}) => {
          this.dataList = data;
        });
      },
      onStatus(row) {
        this.$api('system.role.updateEnable').invoke({
          id: row.id,
          enable: row.enable
        }).then(() => {
          this.$snotify.success('状态已变更！');
        });
      },
      onTrash(row) {
        this.$snotify.confirm(`确认删除角色[${row.roleName}]`, {
          position: 'centerCenter',
          backdrop: 0.5,
          buttons: [
            {
              text: '删除', action: (toast) => {
                this.$snotify.remove(toast.id);
                this.onDelete(row);
              }, bold: true
            },
            {
              text: '取消', action: (toast) => {
                this.$snotify.remove(toast.id);
              }
            }
          ]
        });
      },
      onDelete(row) {
        this.$snotify.async('正在删除...', () => new Promise((resolve, reject) => {
          this.$api('system.role.delete').invoke({id: row.id}).then(() => {
            resolve({
              title: '操作成功!!!',
              body: `成功删除角色[${row.roleName}]`,
              config: {
                timeout: 2000
              }
            });
            this.loadRoleList();
          }).catch(() => {
            reject({
              body: `删除角色[${row.roleName}]失败！`,
              config: {
                timeout: 2000
              }
            });
          });
        }), {backdrop: 0.5});
      }
    }
  };
</script>

<style scoped>

</style>
